// import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import { FilterWrapper } from './style'
import { roomsFilterData } from '@/assets/data/rooms-filter'
import classNames from 'classnames'

const EntireFilter = memo((props) => {
  const [conditions, setConditions] = useState([])

  function itemClickHandle (item) {
    const newConditions = [...conditions]
    if (newConditions.includes(item)) {
      const index = newConditions.findIndex(filterItem => filterItem = item)
      newConditions.splice(index, 1)
    } else {
      newConditions.push(item)
    }
    setConditions(newConditions)
  }

  return (
    <FilterWrapper>
      <div className="filter">
        {
        roomsFilterData.map((item) => {
          return <div
            key={item}
            className={classNames('item', { active: conditions.includes(item) })}
            onClick={e => itemClickHandle(item)}
          >
            {item}
          </div>
          })
        }
      </div>
    </FilterWrapper>
  )
})

EntireFilter.propTypes = {}

export default EntireFilter